import Taro, { useState, useEffect, useRouter } from '@tarojs/taro'
import { View, Swiper, SwiperItem } from '@tarojs/components'
import useBasePage from '../basePage/useBasePage'
import { IIndex } from '../../interfaces/index'
import { redirectToPage, goToErrorPage } from '../../utils/index'
import { observer } from '@tarojs/mobx'
import { GetTestData, GetPostData } from '../../api/home'
import { AtModal, AtButton } from 'taro-ui'

const Home = () => {
  const { params } = useRouter()
  const { onload, awtRs } = useBasePage()
  const [ pageTitle, setPageTitle ] = useState<IIndex['pageTitle']>('首页')
  const [ locationShow, setLocationShow ] = useState<boolean>(false)

  useEffect(() => {
    onload(async () => {
      console.log('参数：', params)
      await setPageTitle('我的小店')      
    }, pageTitle)
  }, [])

  // 获取get测试数据
  const getTestData = async () => {
    let res: IIndex['res'] = await awtRs(GetTestData())
    console.log('get测试：', res)
  }
  // 获取post测试数据
  const getPostData = async () => {
    let params: IIndex['params'] = {
      page: '1',
      count: '5'
    }
    let res: IIndex['res'] = await awtRs(GetPostData(params))
    console.log('post测试：', res)
  }
  
  const renderMenu = () => {
    return (
      <AtButton type='secondary' onClick={ () => redirectToPage('/pages/member/index') }>去会员中心</AtButton>
    )
  }

  const handleModal = () => {
    setLocationShow(!locationShow)
  }

  return (
    <View className='page'>
      <View>这里是{ pageTitle }</View>
      {renderMenu()}
      <AtButton type='primary' onClick={ getTestData }>点我发送get请求</AtButton>
      <AtButton type='secondary' onClick={ getPostData }>点我发送post请求</AtButton>
      <AtButton type='primary' onClick={ () => goToErrorPage(404, '没有找到资源') }>模拟错误操作</AtButton>
      <AtButton type='secondary' onClick={ handleModal }>获取定位</AtButton>
      <AtModal
        isOpened={ locationShow }
        title='获取位置'
        cancelText='取消'
        confirmText='确认'
        onCancel={ handleModal }
        onConfirm={ handleModal }
        content='你的位置信息将用于购物地址使用'
      />
      <Swiper
        className='test-h'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        circular
        indicatorDots
        autoplay>
        <SwiperItem>
          <View className='demo-text-1' style={{background: 'url(https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180)', height: '100%', backgroundSize: '100%'}}></View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-2' style={{background: 'url(https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180)', height: '100%', backgroundSize: '100%'}}></View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-3' style={{background: 'url(https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180)', height: '100%', backgroundSize: '100%'}}></View>
        </SwiperItem>
      </Swiper>
    </View>
  )
}

export default observer(Home)
